<template>
  <div class="wrap">
     <h2>state</h2>
      <p>a:{{ countStore.a }}</p>
      <p>b:{{ countStore.b }}</p>
  </div>

  <div class="wrap">
     <h2>getters</h2>
      <p>doubleA:{{ countStore.doubleA }}</p>
      <p>doubleB:{{ countStore.doubleB }}</p>
      <p>doubleBoth:{{ countStore.doubleBoth }}</p>
  </div>

  <div class="wrap">
     <h2>actions(同步)</h2>
      <p>
        <button @click="countStore.addA">a++</button>
        <button @click="countStore.addAN(10)">a+n</button>
        <button  @click="countStore.addB">b++</button>
      </p>
      <p>
        <button @click="countStore.a++">a++</button>
        <button @click="countStore.a+=10">a+n</button>
        <button @click="countStore.b++">b++</button>
      </p>
  </div>

  <div class="wrap">
     <h2>actions(异步)</h2>
      <p>
        <button @click="countStore.addA_Async">a++</button>
        <button  @click="countStore.addB_Async">b++</button>
        <button  @click="countStore.addBoth_Async">a++,b++</button>
      </p>
     
  </div>
</template>

<script>
import { useCountStore } from "@/stores/counter";


// let countStore = useCountStore();   // 以前版本在选项式语法中可以直接调用,获取store实例

export default {
  data() {
    return {
      countStore: null,
    }
  },
  created () {
    this.countStore = useCountStore();
    console.log("加载完毕",this.countStore);
  }

}

</script>


<style scoped>
.wrap {
  padding: 10px;
  margin: 10px 0;
  border: 1px dashed #333;
}
</style>
